<template>
  <div id="surveylist">  
      <div class="box">
          <div class="item bgcolor1">
              <div class="title titlecolor1">持有总数</div>
              <div class="con">
                 <div class="con_text" v-for="(item,index) in datalist" :key="index">
                     <div class="con_title">
                        <img class="item_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                        <img class="item_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                        <img class="item_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                        <img class="item_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                        <img class="item_img" v-if="index == 4" src="@/assets/images/zy5.png" />
                        {{ item.title }}
                     </div>
                     <div class="number">{{ item.holding_count }}</div>
                 </div>
              </div>
          </div>
          <div class="item bgcolor2">
              <div class="title titlecolor2">预警一</div>
               <div class="con">
                 <div class="con_text" v-for="(item,index) in datalist" :key="index">
                     <div class="con_title">
                         <img class="item_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                        <img class="item_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                        <img class="item_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                        <img class="item_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                        <img class="item_img" v-if="index == 4" src="@/assets/images/zy5.png" />
                         {{ item.title }}
                     </div>
                     <div class="number">{{ item.warning_one }}</div>
                 </div>
              </div>
          </div>
          <div class="item bgcolor3">
              <div class="title titlecolor3">预警二</div>
               <div class="con">
                 <div class="con_text" v-for="(item,index) in datalist" :key="index">
                     <div class="con_title">
                         <img class="item_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                        <img class="item_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                        <img class="item_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                        <img class="item_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                        <img class="item_img" v-if="index == 4" src="@/assets/images/zy5.png" />
                         {{ item.title }}
                     </div>
                     <div class="number">{{ item.warning_two }}</div>
                 </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>



export default {
  name: 'surveylist',
  props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
     
    }
  },
   components:{
      
  },
  created(){
      
  },
  mounted (){
      
  },
  methods: {
     
  }
}
</script>


<style scoped>
#surveylist{
  margin-bottom: 20px;
}
.box{
  display: flex;
}
.item:first-child{
  margin-left:0px;
}
.item{
  flex: 1;
  border-radius:10px;
  margin-left:80px;
  height:250px;
}
.title{
  height:40px;
  line-height: 40px;
  padding:0px 15px;
  border-radius:10px 10px 0px 0px;
}
.titlecolor1{
   background-color:#F0EFFF;
}
.titlecolor2{
   background-color:#FFF5EF;
}
.titlecolor3{
   background-color:#FFEFEF;
}
.bgcolor1{
  background: #F8F8FC;
}
.bgcolor2{
  background: #FCFAF8;
}
.bgcolor3{
  background: #FCF8F8;
}
.con{
  padding: 0px 20px;
}
.con_text{
 float: left;
 width:calc(100%/3);
 text-align: center;
 margin-top: 25px;
}
.con_title{
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.number{
  margin-top:10px;
  font-size:26px;
  font-weight:500;
}
</style>
